<template>
	<view class="fun-flex-col fun-justify-between page">
		<view class="fun-flex-col">
			<text class="text_3">Fixed income account</text>
			<text class="font_2 text_4">{{title}}</text>
			<view class="divider"></view>
			
			<view class="title">Redeem amount</view>
			
			<view class="fun-flex-row fun-justify-between fun-items-center input-wrap">
				<input type="digit" placeholder="Please enter Redeem amount" v-model="amount"></text>
				<text class="text_8">USD</text>
			</view>
			
			<view class="divider_2"></view>
			
			<text class="tips">
				Your redeemed principal will be credited directly to your available balance. Please note that the withdrawal process may take up to 24 hours to complete.
			</text>
		</view>
		
		<view class="text-wrapper_2" @click="confirm">Confirm</view>
		<common-modal v-if='isShowModal' :popData="popData" @done="done" @close='isShowModal = false'></common-modal>
	</view>
</template>

<script>
	import commonModal from "@/components/commonModal.vue";
	import {redeem} from "@/api/home.js"
	export default {
		data() {
			return {
				orderId:"",
				title:"",
				amount:"",
				minimumAmount:"",
				positionAmount:"",
				isShowModal:false,
				popData:{}
			};
		},
		
		onLoad(option) {
			this.title = decodeURIComponent(option?.title) || "";
			this.orderId = this.UTILS.stringToNum(decodeURIComponent(option?.orderId));
			this.minimumAmount = this.UTILS.stringToNum(decodeURIComponent(option?.minimumAmount));
			this.positionAmount = this.UTILS.stringToNum(decodeURIComponent(option?.positionAmount));
		},

		methods: {
			confirm(){
				if(!this.amount){
					this.UTILS.logStr("Enter your purchase amount");
					return
				}
				if((Number(this.positionAmount) - Number(this.amount)) < Number(this.minimumAmount)){
					this.UTILS.logStr('赎回后持仓金额小于此产品的最低持仓金额，请修改');
					return
				}
				this.popData = {
					icon:require("@/static/common/success.png"),
					title:"Redeem  request sent",
					content:"We are processing your redeem request. Please check the record for updates.",
					btnText:["Done"]
				}
				this.isShowModal = true;
			},
			done(){
				const params = {orderId:this.orderId,amount:this.UTILS.stringToNum(this.amount)}
				redeem(params).then(res => {
					if(res.code == 0){
						this.UTILS.logStr(res.msg || 'success')
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/home/index'
							})
						},2000)
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			}
		},
		components:{
			commonModal
		}
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-120 {
		margin-left: 240rpx;
	}
	.page {
		padding: 40rpx 32rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
			.text_3 {
				color: #000000;
				font-size: 32rpx;
				font-weight: 600;
			}

			.font_2 {
				font-size: 28rpx;
				font-family: SF Pro Display;
			}

			.text_4 {
				margin: 16rpx 0;
				color: #666666;
				font-weight: 300;
			}

			.divider {
				background-color: #f6f6f6;
				height: 2rpx;
			}

			.title {
				margin-top: 40rpx;
				font-weight: 600;
				color: #000000;
				font-size: 32rpx;	
			}

			.input-wrap {
				margin-top: 20rpx;
				padding: 8rpx 0;
				input{
					flex:1
				}
				.text_8 {
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}
			}

			.divider_2 {
				background-color: #1a7b99;
				height: 4rpx;
			}

			.tips {
				margin-top: 16rpx;
				color: #777E90;
			}

			.text-wrapper_2 {
				padding: 24rpx 0 28rpx;
				background-color: #1a7b99;
				border-radius: 8rpx;
				color: #ffffff;
				font-weight: bold;
				text-align: center;
				
			}
		

		.font {
			font-size: 32rpx;
			font-family: SF Pro Display;
			color: #000000;
		}
	}
</style>